<template>


         <div class="recharge">

        <div class="header"><van-nav-bar title="确认交易"  left-arrow  @click-left="$router.go(-1)" /></div>
        <div class="detail">
            <p>买入信息</p>
            <div order_info>
                <!-- <div>订单号：</div> -->
                <div>AZC≈{{data.azcInitial}}</div>
                <div>买入价格：{{data.price}}</div>
                <div>总数量：{{data.number}}</div>
                  <div>卖家联系方式:{{data.mobile}}</div>
             </div>
            <p v-if="istrue==4" >对方付款的凭证</p>
            <p v-if="istrue!=4" >支付的方式</p>
            <div v-if="istrue==4">
                <van-uploader v-model="paymentPic" :disabled="true" :deletable="false"   preview-image :max-count="1"  preview-full-image />
            </div>
            <div pay_type v-if="istrue!=4" >
                <van-radio-group v-model="radio">
                    <van-radio name="1" label-position="left">USDT</van-radio>
                    <van-radio name="2" label-position="left">微信</van-radio>
                    <van-radio name="3" label-position="left">支付宝</van-radio>
                </van-radio-group>
            </div>
           <div class="USTDPay" v-show="radio==1" v-if="istrue!=4" >
                <p>USDT付款码</p>
                <div style="display: flex;"><van-uploader v-model="USDTPic" :disabled="true" :deletable="false"  upload-text="收款码"   preview-image :max-count="1"  preview-full-image />
                <van-uploader v-if="istrue==2" v-model="USDTvoucher"  name="USDTPic" :after-read="afterRead" :disabled="false"  upload-text="上传凭证"   preview-image :max-count="1"  preview-full-image />
                </div>
                <p>USDT钱包地址</p>
                <div>
                    <van-cell-group>
                        <van-field v-model="USTDAdd" readonly   center clearable  placeholder="请输入USDT钱包地址">
                            <van-button slot="button" size="small" type="primary">点击复制</van-button>
                        </van-field>
                        </van-cell-group>
                </div>
                <div class="surplus">
                    <div>交易额：{{data.summoney}}</div>
                     <div>可用余额：{{data.surplus}}</div>
                </div>
                
           </div>
              <div class="wechat_Pay"  v-show="radio==2" v-if="istrue!=4" >
                <p>微信付款码</p>
                <div style="display: flex;">
                    <van-uploader  v-model="wechatPic"  :disabled="true" upload-text="收款码" :deletable="false"   preview-image :max-count="1"  preview-full-image />
                    <van-uploader v-if="istrue==2" v-model="weChatvoucher"  name="wxPic" :after-read="afterRead" :disabled="false"  upload-text="上传凭证"   preview-image :max-count="1"  preview-full-image />
                </div>
                <!-- <p>转账订单号</p>
                <div>
                    <van-cell-group>
                        <van-field v-model="wechatOrder"  center clearable   placeholder="请输入转账订单号"></van-field>
                        </van-cell-group>
                </div> -->
              
            </div>
            <div class="aliPay"  v-show="radio==3" v-if="istrue!=4" >
                <p>支付宝付款码</p>
                <div style="display: flex;">
                    <van-uploader  v-model="aliPic"  :disabled="true" upload-text="收款码" :deletable="false"   preview-image :max-count="1"  preview-full-image />
                    <van-uploader v-if="istrue==2" v-model="aliPayvoucher"  name="zfbPic" :after-read="afterRead" :disabled="false"   upload-text="上传凭证"   preview-image :max-count="1"  preview-full-image />
                </div>
                <p>支付宝账户</p>
                <div>
                    <van-cell-group>
                        <van-field v-model="aliPayAccount"  center clearable  placeholder="请输入支付宝账号">
                            <van-button slot="button" size="small" type="primary" @click="copyUSDT">点击复制</van-button>
                        </van-field>
                        </van-cell-group>
                </div>
                <!-- <p>转账订单号</p>
                <div>
                    <van-cell-group>
                        <van-field v-model="aliPayorder"  center clearable  placeholder="请输入转账订单号"></van-field>
                     </van-cell-group>
                </div> -->
                
           </div>
            <div class="but"   v-if="istrue==2||istrue==4">
                        <van-button @click="but" v-if="istrue==2" >确认交易</van-button>
                         <van-button @click="but" v-if="istrue==4">确认发币</van-button>
                </div>
        </div>
     </div>

</template>

<script>

export default {

data() {
    return {
              
                istrue:0,
                radio:'1',  
                USDTPic:[ ],
                wechatPic:[],
                aliPic:[],  
                data:{},
                USTDAdd:'',  //USTD地址
                // wechatOrder:'',//微信订单号
                aliPayAccount:'',//支付宝账号
                // aliPayorder:'',//支付宝订单号
                USDTvoucher:[],////USDT支付凭证
                weChatvoucher:[],//微信支付凭证
                aliPayvoucher:[],//支付宝支付凭证
                paymentPic:[], //待发币 对方付款展示的支付凭证
                voucher0:'',
                voucher1:'',
                voucher2:'',
    }
},
mounted() { 
   let that=this;
    that.base.head_status()
      if(that.base.empty_b(that.$route.params.id)&&that.base.empty_b(that.$route.params.type)){
         that.istrue=that.$route.params.type;
         that.show(that.$route.params.id,that.$route.params.type);
         
    }
  
},
 methods: {
    show(id,type){
         let that=this;
                var data={token:JSON.parse(localStorage.userinfo).token,id:id,type:type}
            
                       that._API.ordershow(data).then(res => {
                           
                           
                                 if(res.code==200){
                                    that.data=res.data;

                                    that.USDTPic=[{ url:res.data.usdt_number}];
                                    that.aliPic=[{ url:res.data.alpay_number}];
                                    that.wechatPic=[{ url: res.data.wechat_number}];
                                    that.USTDAdd=res.data.usdt_addr;
                                    that.aliPayAccount=res.data.alipayaccount;
                                    if(type==4){
                                        that.paymentPic=[{ url: res.data.voucher}];
                                    }
                                 }else{
                                     
                                 that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => { });
                                 }
                         
                          
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
    },
  
    but(){
         let that=this;
        if(that.$route.params.type==4){
              that.$router.push({name:'verif_pwd',params:{type:'sellaffirmdeal',uid:that.$route.params.id}})

            //  var data={token:JSON.parse(localStorage.userinfo).token,id:that.$route.params.id}
              
            //  return
            //            that._API.sellaffirmdeal(data).then(res => {
                           

            //                    that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
            //                      if(res.code==200){
            //                          that.$router.go(-1)
            //                      }
            //                     });
                          
            //               }).catch(err => {  
            //                 console.log("err", err);
            //             });
            return
        }


          var data={token:JSON.parse(localStorage.userinfo).token,id:that.$route.params.id,pay_type:that.radio}
         if(that.radio==1){
             if(!that.base.empty_b(that.USDTvoucher)){
                 return   that.$toast({ message:"请上传微信支付凭证", position: "bottom" });
             }
             data.voucher=that.voucher0;
            
         }else if(that.radio==2){
             if(!that.base.empty_b(that.weChatvoucher)){
                 return   that.$toast({ message:"请上传微信支付凭证", position: "bottom" });
             }
             data.voucher=that.voucher1;
             //微信支付
         }else if(that.radio==3){
               if(!that.base.empty_b(that.aliPayvoucher)){
                 return   that.$toast({ message:"请上传支付宝支付凭证", position: "bottom" });
             }
              data.voucher=that.voucher2;
             //支付宝支付
         }
        
               
            
                       that._API.buyaffirmdeal(data).then(res => {
                           

                               that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                 if(res.code==200){
                                     that.$router.go(-1)
                                 }
                                });
                          
                                
                         
                          
                            
                         
                        }).catch(err => {  
                            console.log("err", err);
                        });
        
    },

   afterRead(file,detail) {
              
     var that=this;
        console.log(file)
            console.log(detail)
    if(file.file.size > 10485760){
         that.$toast({ message:"请上传小一点的图片", position: "bottom" });
        return
    }
    

    var data={file:file.content};

 
     that._API.upload(data).then(res => {
         if(res.code){
                if(detail.name=="wxPic"){
                    that.voucher1=that.baseURL+res.data
                }else if(detail.name=="zfbPic"){
                    that.voucher2=that.baseURL+res.data
                }else if(detail.name=="USDTPic"){
                     that.voucher0=that.baseURL+res.data   
                }
                console.log(res.data)
         }
          that.$toast({ message: res.msg, position: "bottom" });
     }).catch(err => {
          console.log("err", err);
    });
  },
     copyUSDT(){  //复制文本
         var that=this;
          var clipBoard = api.require('clipBoard');
      
           clipBoard.set({
                    value: that.data.alipayaccount
                }, function(ret, err) {
                    if (ret) {
                        that.$toast({ message: "USDT复制成功", position: "bottom" });
                       
                    } else {
                         that.$toast({ message: "USDT复制失败！", position: "bottom" });
                       
                    }
                })
     }
     
 

      }
}
</script>


<style lang="scss" scoped >



    /deep/.van-nav-bar,/deep/.transfer .van-cell-group,/deep/[tab] .van-tabs__nav,/deep/.van-cell-group,/deep/.van-cell{background-color: initial;}
    /deep/.header *,/deep/.van-nav-bar .van-icon,[tab],/deep/.van-uploader__upload-text{color:white}

    .detail{padding: 0 .8rem;}  
    .detail p{line-height: 2.5rem;color:#00C6FF;}
    .detail [order_info]>div{line-height: 1.5rem;font-size: 0.9rem;}
    /deep/.detail [pay_type]>.van-radio-group{display: flex;}
    /deep/.detail [pay_type]>.van-radio-group .van-radio__label{color:white;font-size: 0.8rem;}
    /deep/.detail [pay_type]>.van-radio-group>div{padding-right: 1rem;}
    /deep/.detail .van-radio__icon .van-icon{width:1rem;height: 1rem;line-height: initial;}
    /deep/.detail .van-radio__icon{height: initial;}
    
    /deep/.van-uploader__upload{background-color: #453362;border: 0;}
    /deep/.van-cell{    background-color: #453362;    border-radius: 0rem;}
    
    /deep/.USTDPay input,/deep/.wechat_Pay input,/deep/.aliPay input{color: white;}
  
    /deep/ button{border: 0; background: #831BFA;}
    .surplus{margin: 1rem 0}
    .surplus>div{line-height: 1.5rem;height: 1.5rem;}

    .but{margin-top:2rem }
    .but button{    width: 100%;  border-radius: 3rem;}
    .but button>span{color:white}
</style>
